<template>
    <div class="listScrollTop" ref="box">
      <slot></slot>
      <slot></slot>
    </div>
</template>
  
<script lang="ts">
  import { defineComponent, ref, Ref, onMounted , reactive , toRaw , computed, nextTick } from 'vue';
  export default defineComponent({
      components: {},
      props: {
          speed: {
              default: 1,
              type: Number,
          },
      },
      setup(props){
          const box:Ref = ref(null)
          let height:any = 0
          let isScroll:any = true
          const ele0:any = computed(() => {
              return toRaw(box.value).children[0].clientHeight
          })
          const ele1:any = computed(() => {
              return toRaw(box.value).children[1].clientHeight
          })
          const boxHeight:any = computed(() => {
              return toRaw(box.value).clientHeight;
          })
          //鼠标移入停止滚动 移出继续滚动
          const setEvet = () => {
              toRaw(box.value).onmouseenter = () => {
                  isScroll = false;
                  // height = 0;
              };
              toRaw(box.value).onmouseleave = () => {
                  isScroll = true;
                  nextTick(() => {
                      start(height);
                  });
              }
          }
          //滚动方法
          const start = (h:any) => {
              toRaw(box.value).children[0].style = `transform:translateY(-${height}px);`;
              toRaw(box.value).children[1].style = `height:${boxHeight}px;transform:translateY(-${height}px);overflow: hidden;`;
              if (h >= ele0.value) {
                  height = 0;
              } else {
                  height += props.speed;
              }
              if (!isScroll) return;
              window.requestAnimationFrame(() => {
                  start(height);
              })
          }
          onMounted(() => {
              //在盒子内容高度小于可视高度时不滚动
              if (boxHeight.value < ele0.value) {
                  start(height)
                  setEvet()
              } else {
                  isScroll = false
              }
          })
          return {
            box,
          }
      }
  })
  </script>
  
  <style lang="scss" scoped>
      .listScrollTop {
          overflow: hidden;
      }
      .hover {
          overflow-y: auto;
      }
      .hide {
          display: none;
      }
  </style>